<!--忘记密码短信验证页面-->
<template>
	<div class="login">
		<!--登录logo-->
		<div class="login-center">
			<div class="login-logo"><img src="../../assets/images/logo.png"></div>
			<!--<div class="login-logo-text">验证码已发送到绑定手机号</div>-->
			<!--<div class="login-logo-phone">186****1234</div>-->
			<!--登录信息输入-->
			<div class="login-input">
				<div class="login-input-pass">
					<span class="input-title">手机号</span>
					<input type="text" v-model="username" placeholder="请输入注册时的手机号" />
				</div>
				<div class="login-input-pass">
					<span class="input-title">验证码</span>
					<input type="text" v-model="verifyCode" placeholder="请输入验证码" />
					<span v-show="show" @click="getCode" class="login-input-span">获取验证码</span>
					<span v-show="!show" class="login-input-count">重新发送({{count}})</span>
				</div>
				<div class="login-input-pass">
					<span class="input-title">新密码</span>
					<input type="password" v-model="password" placeholder="请输入新密码" />
				</div>
				<div class="login-input-bt" @click='validation'>
					<span>确认</span>
					<!--<router-link to="/loginmodifysuccess">确认</router-link>-->
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as userAPI from "@/api/user";
	export default {
		name: 'Login',
		data() {
			return {
				show: true,
				count: '',
				timer: null,
				username: "", //手机号
				verifyCode: "", //验证码
				password: "", //密码
				reg: /^1[3456789]\d{9}$/
			}
		},
		methods: {
			getCode() {
				if(!this.reg.test(this.username)) {
					this.$message.warning("请输入正确的手机号");
					return;
				}
				const TIME_COUNT = 120;
				if(!this.timer) {
					var obj = {
						type: "2",
						phone: this.username
					}
					userAPI.getVerifyCode(obj).then((res) => {
						console.log(res, "====验证码信息====");
						if(res.code !== 400) {
							this.count = TIME_COUNT;
							this.show = false;
							this.timer = setInterval(() => {
								if(this.count > 0 && this.count <= TIME_COUNT) {
									this.count--;
								} else {
									this.show = true;
									clearInterval(this.timer);
									this.timer = null;
								}
							}, 1000)
						}
					})
				}
			},
			validation() {
				
				if(!this.reg.test(this.username)) {
					this.$message.warning("请输入正确的手机号");
					return;
				}
				if (!this.verifyCode) {
		        		this.$message.warning("请输入验证码");
		        		return;
		      	}
				if (!this.password) {
		        		this.$message.warning("请输入新密码");
		        		return;
		      	}
		      	
		      	var obj ={
		      		username:this.username,
		      		verifyCode:this.verifyCode,
		      		password:this.password
		      	}
		      	userAPI.forgetPassword(obj).then((res)=>{
		      		console.log(res,'===修改密码信息====')
		      		if(res.code == 200){
		      			this.$router.push({
							path: '/Loginmodifysuccess'
						})
		      		}else{
		      			this.$message.warning('密码修改失败')
		      		}
		      	})
			}
		}
	}
</script>
<style scoped>
	/*登录logo*/
	
	.login {
		position: absolute;
		height: 100%;
		width: 100%;
		background: #FFFFFF;
	}
	
	.login-center {
		width: 640px;
		margin: 0 auto;
	}
	
	.login-logo {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 80px;
	}
	
	.login-logo>img {
		width: 250px;
	}
	
	.login-logo-text {
		text-align: center;
		color: #333333;
		font-size: 14px;
		padding-top: 25px;
	}
	
	.login-logo-phone {
		text-align: center;
		color: #333333;
		font-size: 14px;
		padding-top: 5px;
	}
	/*登录信息输入*/
	
	.login-input {
		padding: 50px 20px;
	}
	
	.login-input-pass {
		display: flex;
		border-bottom: 1px #F4F4F4 solid;
		align-items: center
	}
	
	.login-input-pass .input-title {
		width: 60px;
		font-size: 14px;
		color: #999;
	}
	
	.login-input-pass>input {
		flex: 1;
		border: none;
		height: 45px;
		line-height: 45px;
		outline: none;
	}
	
	.login-input-span {
		font-size: 14px;
		color: #37B3FF;
		width: 100px;
		border-left: 1px #DCDCDC solid;
		padding-left: 15px;
		margin-left: 15px;
		cursor: pointer;
	}
	
	.login-input-count {
		font-size: 14px;
		color: #bbbbbb;
		width: 100px;
		border-left: 1px #DCDCDC solid;
		padding-left: 15px;
		margin-left: 15px
	}
	
	.login-input-bt {
		margin-top: 15px;
		text-align: center;
		width: 100%;
		height: 45px;
		line-height: 45px;
		color: #FFFFFF;
		background: #37B3FF;
		border-radius: 15px;
		font-size: 14px;
		cursor: pointer;
	}
</style>